import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import RootScope from './RootScope.es6'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import format from 'lib/util/format'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
import tips from '../common/indicator-tips.jsx'

const traceCols = [{
  title:'IP',
  key:'ip',
  sortable:true,
  render:function(fmtVal,rowData){
    return (
      <a className="link-in-list" href={'#/trace/'+rowData.uuid}>{fmtVal}</a>
    )
  }
},{
  title:'端口号',
  key:'port',
  sortable:true
},{
  title:'开始时间',
  key:'openStamp',
  sortable:true,
  formatter:format.stampToTime
},{
  title:'耗时（ms）',
  key:'timeUsage',
  sortable:true,
  formatter:format.integer
},{
  title:'异常',
  key:'reason',
  sortable:true
}]
export default class RootView extends View {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
        <div className="box">
          <Card title={
              <span>
                Read耗时趋势 Top 5
              </span>
            } extra={
              addWidgetMixin(this.scope.chart0Api,'Read耗时趋势 Top 5')
            }>
            <ChartWidget
              store={this.state.chart0}
            />
          </Card>
        </div>
        <div className="box">
          <Card title={
              <span>
                Write耗时趋势 Top 5
              </span>
            } extra={
              addWidgetMixin(this.scope.chart1Api,'Write耗时趋势 Top 5')
            }>
            <ChartWidget
              store={this.state.chart1}
            />
          </Card>
        </div>
        <div className="box">
          <Card title="慢请求Trace">
            <GridWidget store={this.state.grid} cols={traceCols}/>
          </Card>
        </div>
      </div>
    )
  }
}

RootView.defaultProps = {
  Scope:RootScope
}
